<!--分时-->
<template>
  <div>
    <!-- content -->
    <div class="k_content">
      <div class="k" id="kline_fenshi">
        <div id="main_fenshi" style="width:100%;height:100%;"><div class="loding">数据正在加载 请稍后...</div></div>
      </div>
      <div class="k_content_bottom">
        <div class="k_content_left">
          <div class="k_left_box">
            <span>最高</span>
            <span :class="(ticket[select.code2] && ticket[select.code2].wave||0) <= 0 ? 'up' : 'down'">
              {{ (ticket[select.code2] && ticket[select.code2].high||0).toFixed(select.digit) || '--' }}
            </span>
            <span></span>
          </div>
          <div class="k_left_box">
            <span>最低</span>
            <span :class="(ticket[select.code2] && ticket[select.code2].wave||0) <= 0 ? 'up' : 'down'">
              {{ (ticket[select.code2] && ticket[select.code2].low||0).toFixed(select.digit) || '--' }}
            </span>
            <span></span>
          </div>
          <div class="k_left_box">
            <span>持仓量</span>
            <span>{{ (ticket[select.code2] && ticket[select.code2].position||0).toFixed(select.digit) || '--' }}</span>
            <span></span>
          </div>
        </div>
        <div class="k_bottom_right" style="width:50%;height:100%;color: #fff;">
          <p :class="(ticket[select.code2] && ticket[select.code2].wave||0) <= 0 ? 'up' : 'down'">
            {{ (ticket[select.code2] && ticket[select.code2].price||0).toFixed(select.digit) || '--' }}
          </p>
          <p :class="(ticket[select.code2] && ticket[select.code2].wave||0) <= 0 ? 'up' : 'down'">
            {{ (ticket[select.code2] && ticket[select.code2].wave||0).toFixed(select.digit) || '--' }}%
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import { Popup } from 'mint-ui';
import echarts from 'echarts';
import kline from '@/kline/kline.js';
import data from '@/kline/tmpdata.js';
export default {
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示行情 */,
    ticket: state => state.trade.ticket /*, 推送数据 */
  }),
  data() {
    return {
      time: 1,
      isloding: true,
      item: {},
      selectItem: {},
      kline: {},
      data0: [],
      klineInterval: null,
      // product_item: {},
      popupVisible: true,
      popupVisible4: false,
      buystocks: true, //控制tab选项卡显示
      isA: true, //当isA改变时，将class更新
      isB: false, //当isB改变时，将class更新
      isC: '0', //当isC改变时，将class更新
      isright: false,
      mychart: null
    };
  },
  beforeDestroy() {
    if (this.klineInterval) {
      clearInterval(this.klineInterval);
    }
    this.klineInterval = null;
  },
  watch: {},
  mounted() {
    let mychart = document.getElementById('main_fenshi');
    mychart.style.width = $('#kline_fenshi').width() + 'px';
    mychart.style.height = $('#kline_fenshi').height() + 'px';
    this.mychart = echarts.init(mychart);
    this.init();
  },
  components: {},
  methods: {
    init() {
      var that = this;
      that.klineInterval = setInterval(res => {
        that.rkline(this.select.code, 1);
      }, 3000);
      this.rkline(this.select.code, this.time);
    },
    right() {
      this.isright = !this.isright;
    },
    rightfalse() {
      this.isright = false;
    },
    rkline(symbol, time) {
      symbol = symbol ? symbol : (symbol = this.select.code);
      if (!symbol) {
        symbol = this.select.code;
      }
      this.$get('addons/tf-futures/get-kline/get-line?symbol=' + symbol).then(res => {
        if (res.data[0].length > 0) {
          this.mychart.setOption(kline.initMOption(res.data, 'auto'));
        }else{
          if (this.klineInterval) {
            clearInterval(this.klineInterval);
          }
          this.klineInterval = null;
          this.mychart.setOption(kline.initMOption(data.lindata0, 'auto'));
        }
      });
    }
  }
};
</script>

<style scoped>
@import url('../../../static/css/popup.css');
.up {
  color: #00ff00;
}
.down {
  color: red;
}
.k_content {
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  background: #000;
}

.k {
  width: 100vw;
  height: calc(100vh - 5rem);
  margin-top: 1rem;
}

.k_content_bottom {
  width: 98%;
  height: 2.5rem;
  margin: 0rem auto;
  border: 0.013333rem solid #7d0711;
  display: flex;
  position: fixed;
  bottom: 1.2rem;
  left: 0;
  right: 0;
  background: #000;
}

.k_content_left {
  width: 50%;
  height: 100%;
  border-right: 1px solid #7d0711;
}

.k_left_box {
  width: 100%;
  height: 0.82rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 0.4rem;
  color: #fff;
  letter-spacing: 2px;
  border-bottom: 1px solid #7d0711;
}

.k_bottom_right {
  width: 50%;
  height: 100%;
  color: rgb(255, 255, 255);
  font-size: 0.45rem;
  padding: 0 0.4rem;
  box-sizing: border-box;
  line-height: 1.2rem;
}
</style>
